import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {Input,Form,Select} from 'antd'
export default class UserForm extends PureComponent {
    static propTypes = {
        user: PropTypes.object,
        roles:PropTypes.array.isRequired
    }
    formRef = React.createRef()

    getFormValues=()=>{
        //     this.formRef.current.setFieldsValue({
        //         'role._id': 1,
        //         'password':'123'	
        //  })
        return this.formRef.current.getFieldsValue()
    }

    render() {
        
        const {roles, user} = this.props
        const {username,password,phone,email,role_id} = user
        return (
            <Form ref={this.formRef} onValuesChange={this.onValuesChange} labelCol={{span:4}} wrapperCol={{span:15}} initialValues={{username,password,phone,email,role_id}}>
                <Form.Item  label='用户名' name='username' required tooltip='请输入用户名'>
                    <Input placeholder='请输入用户名'/>
                </Form.Item>
                <Form.Item label='密码' name='password' required tooltip='请输入密码'>
                    <Input type='password' placeholder='请输入密码'/>
                </Form.Item>
                <Form.Item label='手机号' name='phone'>
                    <Input placeholder='请输入手机号'/>
                </Form.Item>
                <Form.Item  label='邮箱' name='email'>
                    <Input placeholder='请输入邮箱'/>
                </Form.Item>
                <Form.Item label='角色' name='role_id' >
                    <Select placeholder='请选择分类'>
                        {
                            roles.map(role=>(<Select.Option key={role._id} value={role._id}>{role.name}</Select.Option>))
                        }
                    </Select>
                </Form.Item>
            </Form>
        )
    }
}
